<template>
	<view>
		<view class="bg_white pl10 pr10 pt5 pb5 flexbox">
			<u-search v-model="searchValue" :disabled="true" :showAction="false" shape="shape" :placeholder="'搜索'"
				@click="isCustom">
			</u-search>

			<view v-show="searchValue != ''" class="pl10 flexCC" @click="clearClick">
				<text>清除</text>
			</view>
		</view>

		<u-popup :show="showPop" :customStyle="{width:'70vw'}" mode="right" @close="popClose()" @open="open">
			<scroll-view scroll-y="true" style="height: 88vh;">
				<view v-for="(item,index) in dataList" class="p10">

					<u--input prefixIcon="search" :placeholder="item.text" border="surround" v-model="item.value">
					</u--input>

				</view>
			</scroll-view>

			<view class="flexbox" style="height: 12vh; align-items: flex-end;">
				<u-button type="warning" :customStyle="{borderRadius:'0px',padding:'25px'}" text="重置"
					@click="resetClick"></u-button>
				<u-button type="primary" :customStyle="{borderRadius:'0px',padding:'25px'}" text="确定"
					@click="confirmClick">
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			listCode: {
				type: String,
				default: "ProjectApply_MyList"
			},
			columnList: {
				type: Array,
				default: () => []
			},
			custom: {
				type: Boolean,
				default: false
			},
			defList: {
				type: Array,
				default: () => [{
						key: "TrueName",
						text: "人员名称",
						value: ""
					},
					{
						key: "UserCode",
						text: "工号",
						value: ""
					}
				]
			}
		},
		data() {
			return {
				showPop: false,
				searchValue: "",
				dataList: [],
				filter: {
					list: []
				},
			}
		},
		created() {

		},
		methods: {
			isCustom() {
				document.body.style.overflowY = 'hidden';
				debugger
				if (!this.custom) {
					this.searchClick();
				} else {
					this.customClick();
				}
			},
			searchClick() {
				this.dataList = this.$gl.deepClone(this.columnList);
				this.showPop = true;
			},
			customClick() {
				this.dataList = this.defList;
				this.showPop = true;
			},
			resetClick() {
				this.dataList = this.dataList.map(item => {
					return {
						key: item.key,
						text: item.text,
						value: ""
					}
				});
			},
			confirmClick() {

				const list = this.dataList.filter(item => !this.$gl.IsNullOrEmpty(item.value));

				this.joinStr(list);

				//拼接 筛选条件
				this.filter.list = list.map(item => {
					return {
						key: item.key,
						value: item.value
					}
				})

				this.$emit("SearchEvent", this.filter);
				document.body.style.overflowY = 'scroll';
				this.showPop = false;
			},
			clearClick() { //清除筛选数据
				this.searchValue = "";
				this.filter.list = [];
				this.$emit("ClearEvent");
			},
			popClose() { //关闭弹窗 清除筛选数据
				document.body.style.overflowY = 'scroll';
				this.clearClick();
				this.showPop = false
			},
			joinStr(list) {
				let str = "";
				list.forEach(item => {
					str = str + item.text + "：" + item.value + "、"
				})
				str = str.substr(0, str.length - 1);
				this.searchValue = str;
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
